<template>
  <div class="bgc">
  <!-- 导航栏 -->
  <van-nav-bar title="优惠卷管理" >
  <template #left>
    <van-icon name="cross"  size="20"/>
  </template>
  <template #right>
    <i class="iconfont icon-nav_ico_menu_h"></i>
  </template>
</van-nav-bar>
<!-- 优惠卷 -->
<div class="card">
   <div class="card1">
    <img src="../assets/iconfont/1.jpg" alt="">
      <div class="item">
          <div>
           <div class="wen">不万能先生火锅店</div>
           <span class="s1">审核通过</span>
          </div>
           <div class="chakan">查看</div>
      </div>
   </div>
   <div class="card1">
    <img src="../assets/iconfont/1.jpg" alt="">
      <div class="item">
          <div>
           <div class="wen">不万能先生火锅店</div>
           <span class="s2">审核未通过</span>
          </div>
       
      </div>
   </div>
   <div class="card1">
    <img src="../assets/iconfont/1.jpg" alt="">
      <div class="item">
          <div>
           <div class="wen">不万能先生火锅店</div>
           <span class="s3">未审核</span>
          </div>
        
      </div>
   </div>
</div>




<!-- 新建优惠卷 -->
<van-button round block type="info" native-type="submit">新建优惠卷</van-button>
</div>
</template>

<script>
import navgatior from '../components/navgatior.vue'
export default {
  components: {
    navgatior
  },
}
</script>

<style lang="less" scoped>
body,html {
  height: 100%;

}
.bgc {
  height: 667px;
  background-color: #f4f5f7;
}
body {
  margin: 0;
}
.van-nav-bar{
  background-color: #101010;
 }

 .iconfont {
  color: white;
 }
 ::v-deep .van-nav-bar__title {
  color: white;
 }
 .van-button--block {
  width: 85%;
  margin-left: 30px;
  margin-top: 30px;
  background-image: linear-gradient(#f87d44,#fe9a5c);
  border-color: #fc8f53;
}
.card1 {
  position: relative;
  display: flex;
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 345px;
  height: 90px;
  background-color: #fff;
  border-radius: 10px;
   img {

    margin-top: 15px;
    margin-left: 15px;
   }
}
.item {
  display: flex;
}
img {
  width: 60px;
  height: 60px;
}
.wen {
  margin-left: 5px;
  margin-top: 30px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.s1 {
  margin-left: 5px;
  color: #4ac69e;
  font-size: 12px;
}
.s3 {
  margin-left: 5px;
  color: #fc6a2a;
  font-size: 12px;
}
.s2 {
  color: #999999;
  font-size: 12px;
  margin-left: 5px;
}
.chakan {
  position: absolute;
  top: 40%;
  right: 5%;
  font-size: 15px;
  text-align: center;
  width: 60px;
  height: 22px;
  background-image: linear-gradient(#f97c44,#fd995b);
  color: #fffdfc;
  border-radius: 5px;
}
</style>